<template>
  <el-dialog :title="ruleForm.id ? '编辑计费规则' : '添加计费规则'" :visible="isVisible" @close="onCloseDialog">
    <!-- 区域表单 -->
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="ruleRules" size="medium">
      <!-- 计费规则编号 -->
      <el-form-item label="计费规则编号" prop="ruleNumber">
        <el-input v-model="ruleForm.ruleNumber" placeholder="请输入计费规则编号" />
      </el-form-item>
      <!-- 计费规则名称 -->
      <el-form-item label="计费规则名称" prop="ruleName">
        <el-input v-model="ruleForm.ruleName" placeholder="请输入计费规则名称" />
      </el-form-item>
      <!-- 计费方式 -->
      <el-form-item label="计费方式（全天收费）" prop="chargeType">
        <el-radio-group v-model="ruleForm.chargeType">
          <el-radio v-for="item in Object.keys(chargeTypeObj)" :key="item" :label="item" border>{{ chargeTypeObj[item] }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 免费时长 和 收费上限 -->
      <el-row>
        <el-col :span="11">
          <!-- 免费时长 -->
          <el-form-item class="free-duration" label="免费时长">
            <el-input-number v-model="ruleForm.freeDuration" controls-position="right" step-strictly :min="1" placeholder="请输入免费时长" />分钟
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <!-- 收费上限 -->
          <el-form-item class="charge-ceiling" label="收费上限" prop="chargeCeiling">
            <el-input v-model="ruleForm.chargeCeiling" placeholder="请输入收费上限" />元
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 计费规则 -->
      <el-form-item class="charge-rule" label="计费规则" required>
        <!-- 按时长收费时显示 规则1 -->
        <div v-if="ruleForm.chargeType === 'duration'" class="charge-rule-1">
          <span>每</span>
          <el-form-item prop="durationTime">
            <el-input-number v-model="ruleForm.durationTime" step-strictly controls-position="right" :min="1" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="durationType">
            <el-select v-model="ruleForm.durationType" placeholder="请选择">
              <el-option label="小时" value="hour" />
              <el-option label="分钟" value="minute" />
            </el-select>
          </el-form-item>
          <el-form-item prop="durationPrice">
            <el-input v-model="ruleForm.durationPrice" placeholder="请输入" />
          </el-form-item>
          <span>元</span>
        </div>
        <!-- 按次收费时显示 规则2 -->
        <div v-else-if="ruleForm.chargeType === 'turn'" class="charge-rule-2">
          <span>每次</span>
          <el-form-item prop="turnPrice">
            <el-input v-model="ruleForm.turnPrice" placeholder="请输入" />
          </el-form-item>
          <span>元</span>
        </div>
        <!-- 分段收费时显示 规则3 -->
        <div v-else class="charge-rule-3">
          <div class="first-item">
            <el-form-item prop="partitionFrameTime">
              <el-input-number v-model="ruleForm.partitionFrameTime" step-strictly controls-position="right" :min="1" placeholder="请输入" />
            </el-form-item>
            <span>小时内，每小时收费</span>
            <el-form-item prop="partitionFramePrice">
              <el-input v-model="ruleForm.partitionFramePrice" placeholder="请输入" />
            </el-form-item>
            <span>元</span>
          </div>
          <div class="second-item">
            <span>每增加</span>
            <el-form-item prop="partitionIncreaseTime">
              <el-input-number v-model="ruleForm.partitionIncreaseTime" step-strictly controls-position="right" :min="1" placeholder="请输入" />
            </el-form-item>
            <span>小时，增加</span>
            <el-form-item prop="partitionIncreasePrice">
              <el-input v-model="ruleForm.partitionIncreasePrice" placeholder="请输入" />
            </el-form-item>
            <span>元</span>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <el-button type="primary" @click="onSaveRule">确认</el-button>
      <el-button @click="onCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addRuleAPI, getRuleDetailsAPI, editRuleAPI } from '@/api/car/carrule'
export default {
  name: 'RuleEditor',
  data() {
    return {
      isVisible: false, // 弹窗是否可见
      ruleFormRef: null, // 表单DOM元素
      // 表单数据
      ruleForm: {
        ruleNumber: '', // 计费规则编号
        ruleName: '', // 计费规则名称
        chargeType: 'duration', // 计费方式，默认按时长收费
        freeDuration: undefined, // 免费时长
        chargeCeiling: null, // 收费上限
        durationTime: undefined, // 按时长收费时的单位时长
        durationType: null, // 单位时长计时单位
        durationPrice: null, // 按时长收费时的单位时长价格
        turnPrice: null, // 按次收费时每次的价格
        partitionFrameTime: undefined, // 分段收费时的第一阶段时长
        partitionFramePrice: null, // 分段收费时的第一阶段单价
        partitionIncreaseTime: undefined, // 分段收费时的超出阶段时长
        partitionIncreasePrice: null // 分段收费时的超出阶段单价
      },
      // 表单校验规则
      ruleRules: {
        ruleNumber: [
          { required: true, message: '请输入规则编号', trigger: 'blur' }
        ],
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        chargeType: [
          { required: true, message: '请选择计费方式', trigger: 'change' }
        ],
        chargeCeiling: [
          { pattern: /^[1-9]\d*\.\d+$|^0\.\d*[1-9]\d*$|^[1-9]\d*$/, message: '请输入正数', trigger: 'blur' }
        ],
        durationTime: [
          { required: true, message: '请输入时长', trigger: 'blur' }
        ],
        durationType: [
          { required: true, message: '请选择时间单位', trigger: 'blur' }
        ],
        durationPrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d+$|^0\.\d*[1-9]\d*$|^[1-9]\d*$/, message: '请输入正数', trigger: 'blur' }
        ],
        turnPrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d+$|^0\.\d*[1-9]\d*$|^[1-9]\d*$/, message: '请输入正数', trigger: 'blur' }
        ],
        partitionFrameTime: [
          { required: true, message: '请输入时长', trigger: 'blur' }
        ],
        partitionFramePrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d+$|^0\.\d*[1-9]\d*$|^[1-9]\d*$/, message: '请输入正数', trigger: 'blur' }
        ],
        partitionIncreaseTime: [
          { required: true, message: '请输入时长', trigger: 'blur' }
        ],
        partitionIncreasePrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d+$|^0\.\d*[1-9]\d*$|^[1-9]\d*$/, message: '请输入正数', trigger: 'blur' }
        ]
      },
      // 收费方式对象合集
      chargeTypeObj: {
        duration: '时长收费',
        turn: '按次收费',
        partition: '分段收费'
      }
    }
  },
  methods: {
    // 获取收费规则详情
    async getRuleDetails(id) {
      this.ruleForm = await getRuleDetailsAPI(id)
    },
    async open(row) {
      this.isVisible = true
      // 根据row.id判断是添加规则还是编辑规则
      if (row.id) {
        // 获取收费规则详情
        this.getRuleDetails(row.id)
      }
    },
    onCloseDialog() {
      // 关闭弹窗
      this.isVisible = false
      // 重置表单
      this.ruleForm = {
        ruleNumber: '', // 计费规则编号
        ruleName: '', // 计费规则名称
        chargeType: 'duration', // 计费方式，默认按时长收费
        freeDuration: undefined, // 免费时长
        chargeCeiling: null, // 收费上限
        durationTime: undefined, // 按时长收费时的单位时长
        durationType: null, // 单位时长计时单位
        durationPrice: null, // 按时长收费时的单位时长价格
        turnPrice: null, // 按次收费时每次的价格
        partitionFrameTime: undefined, // 分段收费时的第一阶段时长
        partitionFramePrice: null, // 分段收费时的第一阶段单价
        partitionIncreaseTime: undefined, // 分段收费时的超出阶段时长
        partitionIncreasePrice: null // 分段收费时的超出阶段单价
      }
    },
    // 保存规则
    onSaveRule() {
      // 校验表单
      this.$refs.ruleFormRef.validate(async valid => {
        if (valid) {
          // 根据id判断是添加还是修改
          if (this.ruleForm.id) {
            // 修改收费规则
            await editRuleAPI(this.ruleForm)
            // 提示成功
            this.$message.success('修改成功')
          } else {
            // 新增收费规则
            await addRuleAPI(this.ruleForm)
            // 成功提示
            this.$message.success('添加成功')
          }
          // 关闭弹窗，重置表单
          this.onCloseDialog()
          // 刷新收费规则列表
          this.$emit('refresh-rule-list')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 600px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form {
      padding: 0 50px;
      .el-radio-group {
        width: 100%;
      }
      .free-duration {
        .el-input-number {
          width: 80%;
          margin-right: 7px;
          .el-input__inner {
            text-align: left;
          }
        }
      }
      .charge-ceiling {
        .el-input {
          width: 80%;
          margin-right: 7px;
        }
      }
      .charge-rule {
        .charge-rule-1 {
          width: 100%;
          display: grid;
          grid-template-columns: max-content repeat(3, 1fr) max-content;
          gap: 7px;
          justify-items: stretch;
          .el-input-number--medium {
            width: auto;
            .el-input__inner {
              text-align: left;
            }
          }
        }
        .charge-rule-2 {
          width: 100%;
          display: grid;
          grid-template-columns: max-content 200px max-content;
          gap: 7px;
        }
        .charge-rule-3 {
          width: 100%;
          .first-item {
            width: 100%;
            margin-bottom: 20px;
            display: grid;
            grid-template-columns: 1fr max-content 1fr max-content;
            gap: 7px;
            justify-items: stretch;
            .el-input-number--medium {
              width: auto;
              height: 36px;
              .el-input__inner {
                text-align: left;
              }
            }
          }
          .second-item {
            width: 100%;
            display: grid;
            grid-template-columns: max-content 1fr max-content 1fr max-content;
            gap: 7px;
            justify-items: stretch;
            .el-input-number--medium {
              width: auto;
              height: 36px;
              .el-input__inner {
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
  }
}
</style>
